<template>
  <div>
    <div class="box">
      <el-form ref="queryRef" :model="queryForm">
        <el-row>
          <el-col :span="6">
            <el-form-item label="教室名称：" prop="name">
              <el-input v-model.trim="queryForm.name" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item>
              <el-button type="primary" @click="getAllClassRoom(null)" :loading="searchLoading">
                <icons name="search"></icons>
                搜索
              </el-button>
              <el-button @click="reset()">
                <icons name="reset"></icons>
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="container">
      <el-button type="primary" @click="showEditClass(null)" style="margin-bottom: 10px">+ 新增</el-button>
      <el-table :data="tableData" v-loading="tableLoading" border style="width: 100%">
        <el-table-column prop="class_room" label="教室名称" width="280" align="center" header-align="center" />
        <el-table-column prop="addRess" label="地点" width="280" align="center" header-align="center" />
        <el-table-column prop="remarks" label="备注" width="480" align="center" header-align="center" />
        <el-table-column label="操作" align="center" header-align="center">
          <template #default="{ row }">
            <el-button type="text" @click="showEditClass(row)">编辑</el-button>
            <!-- <el-button type="text">查看</el-button> -->
            <el-button type="text" @click="delClassRoom(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="paging">
        <el-pagination layout="total, sizes,prev,pager,next,jumper" :page-size="queryForm.pageSize"
          :page-sizes="[10, 20, 30, 40, 50]" :total="total" :current-page.sync="queryForm.page"
          @current-change="hCurrentChange" @size-change="hSizeChange" />
      </div>
    </div>
    <editClassRoom :valueShow=classInfoShow :editClassRoomInfo="classInfoRow" @closeClassRoom="closeClassRoom" />
  </div>
</template>
<script lang="ts">
import { queryAllClassRoom, deleteClassRoom } from '@/api/teaching/class-room'
import { defineComponent, reactive, ref } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import editClassRoom from './components/editClassRoom.vue'
import { ElMessage } from 'element-plus';
export default defineComponent({
  setup(props) {
    const { proxy } = useCurrentInstance()
    const classInfoShow = ref(false)
    const classInfoRow = ref(null)
    const queryRef: any = ref(null)
    const queryForm = reactive({
      name: '',
      page: 1,
      pageSize: 10
    })
    const name = ref('')
    const tableData = ref([])
    const total = ref(0)
    const searchLoading = ref(false)
    const tableLoading = ref(false)

    /**
     * 方法区域
     */

    // 分页、搜索查询事件
    const getAllClassRoom = (page) => {
      page && (queryForm.page = page)
      searchLoading.value = true
      tableLoading.value = true
      queryAllClassRoom(queryForm).then((res: any) => {
        total.value = res.data.total
        tableData.value = res.data.classRoomList
      }).finally(() => {
        searchLoading.value = false
        tableLoading.value = false
      })
    }

    // 重置按钮事件
    const reset = () => {
      queryRef.value.resetFields()
    }

    // 删除事件
    const delClassRoom = (id) => {
      tableLoading.value = true
      deleteClassRoom({ id }).then((res: any) => {
        ElMessage.success(res.message)
        getAllClassRoom(undefined)
      }).finally(() => {
        tableLoading.value = false
      })
    }

    // 页码改变事件
    const hCurrentChange = (val) => {
      queryForm.page = val
    }

    // 分页大小改变事件
    const hSizeChange = (val) => {
      queryForm.pageSize = val
    }

    // 显示编辑弹框
    const showEditClass = (val) => {
      classInfoShow.value = true
      classInfoRow.value = val
    }

    // 关闭编辑弹框
    const closeClassRoom = (val) => {
      classInfoShow.value = false
      classInfoRow.value = null
      val && getAllClassRoom(undefined)
    }

    /**
     * 初始方法执行区域
     */
    getAllClassRoom(undefined)

    return {
      tableData,
      classInfoShow,
      classInfoRow,
      queryForm,
      queryRef,
      total,
      searchLoading,
      tableLoading,
      name,
      showEditClass,
      closeClassRoom,
      hCurrentChange,
      hSizeChange,
      getAllClassRoom,
      reset,
      delClassRoom
    }
  },
  components: { editClassRoom }
})
</script>
<style></style>
